<template>
  <div style="height:6vh;padding: 10px 20px;background-color:#fff;">
    <span style="line-height: 60px;font-size:20px;">宠物买卖管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;" @click="openAddDialog">新增宠物买卖信息</el-button>
  </div>

  <el-card style="height: 70px;margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="宠物买卖搜索" style="width: 220px;">
        <el-input placeholder="输入宠物名称或买家姓名" v-model="searchPetSalesForm.keyword" @keydown.enter="loadPetSales"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadPetSales">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-table :data="petSales" stripe>
    <el-table-column prop="id" label="买卖信息id"></el-table-column>
    <el-table-column prop="petName" label="宠物名称"></el-table-column>
    <el-table-column prop="buyerName" label="买家姓名"></el-table-column>
    <el-table-column prop="buyerPhone" label="买家电话"></el-table-column>
    <el-table-column prop="saleDate" label="买卖日期"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column prop="status" label="交易状态">
      <template #default="scope">
        <span>{{ scope.row.status === 1 ? '已成交' : '待成交' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="create_time" label="创建时间"></el-table-column>
    <el-table-column prop="update_time" label="更新时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="openEditDialog(scope.row)">编辑</el-button>
        <el-button @click="deletePetSale(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增/编辑对话框 -->
  <el-dialog :title="dialogTitle" style="width: 1000px;padding: 40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="宠物名称">
            <el-input placeholder="请输入宠物名称" v-model="currentPetSale.petName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="买家姓名">
            <el-input placeholder="请输入买家姓名" v-model="currentPetSale.buyerName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="买家电话">
            <el-input placeholder="请输入买家电话" v-model="currentPetSale.buyerPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="买卖日期">
            <el-date-picker
                v-model="currentPetSale.saleDate"
                type="date"
                placeholder="请选择买卖日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格">
            <el-input placeholder="请输入价格" v-model="currentPetSale.price"></el-input>
          </el-form-item>
          <el-form-item label="交易状态">
            <el-radio-group v-model="currentPetSale.status">
              <el-radio label="1">已成交</el-radio>
              <el-radio label="0">待成交</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="savePetSale">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";

// 假设这是你的基础 URL
const BASE_URL = 'your_base_url';

// 定义变量用来控制弹窗是否可见
const dialogVisible = ref(false);
// 定义数组用来保存宠物买卖数据
const petSales = ref([]);
// 定义变量用来保存宠物买卖搜索条件
const searchPetSalesForm = ref({ keyword: '' });
// 定义变量用来保存当前操作的宠物买卖数据
const currentPetSale = ref({
  id: null,
  petName: '',
  buyerName: '',
  buyerPhone: '',
  saleDate: '',
  price: '',
  status: '0'
});
// 定义变量用来保存弹窗的标题
const dialogTitle = ref('新增宠物买卖信息');

// 点击"新增宠物买卖信息"按钮时调用的方法
const openAddDialog = () => {
  dialogTitle.value = '新增宠物买卖信息';
  currentPetSale.value = {
    id: null,
    petName: '',
    buyerName: '',
    buyerPhone: '',
    saleDate: '',
    price: '',
    status: '0'
  };
  dialogVisible.value = true;
};

// 处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('您确认要关闭弹窗吗?')) {
    currentPetSale.value = {
      id: null,
      petName: '',
      buyerName: '',
      buyerPhone: '',
      saleDate: '',
      price: '',
      status: '0'
    };
    dialogVisible.value = false;
  }
};

// 新增或更新宠物买卖信息
const savePetSale = () => {
  let data = qs.stringify(currentPetSale.value);
  // let url = '';
  // if (currentPetSale.value.id) {
  //   // 更新操作
  //   url = `${BASE_URL}/v1/pet_sales/update`;
  // } else {
  //   // 新增操作
  //   url = `${BASE_URL}/v1/pet_sales/save`;
  // }
  // axios.post(url, data)
  //     .then((response) => {
  //       if (response.data.code === 2000) {
  //         ElMessage.success(currentPetSale.value.id ? '更新成功!' : '保存成功!');
  //         currentPetSale.value = {
  //           id: null,
  //           petName: '',
  //           buyerName: '',
  //           buyerPhone: '',
  //           saleDate: '',
  //           price: '',
  //           status: '0'
  //         };
  //         dialogVisible.value = false;
  //         // 操作成功后，重新加载所有的宠物买卖数据
  //         loadPetSales();
  //       } else {
  //         ElMessage.error(response.data.msg);
  //       }
  //     })
  //     .catch((error) => {
  //       ElMessage.error('请求出错: ' + error.message);
  //     });
};

// 加载宠物买卖列表的方法
const loadPetSales = () => {
  let data = qs.stringify(searchPetSalesForm.value);
  // axios.get(`${BASE_URL}/v1/pet_sales/select?${data}`)
  //     .then((response) => {
  //       if (response.data.code === 2000) {
  //         petSales.value = response.data.data;
  //       } else {
  //         ElMessage.error(response.data.msg);
  //       }
  //     })
  //     .catch((error) => {
  //       ElMessage.error('请求出错: ' + error.message);
  //     });
};

// 页面加载完毕立即调用加载宠物买卖的方法
onMounted(() => {
  loadPetSales();
});

// 重置搜索的方法
const resetSearch = () => {
  searchPetSalesForm.value = { keyword: '' }; // 清空搜索条件
  loadPetSales(); // 重新加载所有宠物买卖数据
};

// 打开编辑对话框
const openEditDialog = (row) => {
  dialogTitle.value = '编辑宠物买卖信息';
  currentPetSale.value = { ...row };
  dialogVisible.value = true;
};

// 删除宠物买卖信息
const deletePetSale = (id) => {
  if (confirm('您确认要删除当前宠物买卖信息吗?')) {
    // axios.get(`${BASE_URL}/v1/pet_sales/delete/${id}`)
    //     .then((response) => {
    //       if (response.data.code === 2000) {
    //         ElMessage.success('删除宠物买卖信息成功!');
    //         loadPetSales();
    //       } else {
    //         ElMessage.error(response.data.msg);
    //       }
    //     })
    //     .catch((error) => {
    //       ElMessage.error('请求出错: ' + error.message);
    //     });
  }
};
</script>

<style scoped>

</style>